<template>
  <div class="container">
    <div class="border_head">
      <div class="search_input">
        <el-input v-model="searchInput" placeholder="请输入学生姓名"></el-input>
        <el-button class="searchbtn" type="primary" @click="search">
          搜索
        </el-button>
      </div>
      <div class="submmit_selects">
        <el-button class="submmitbtn" type="danger" @click="submmit">
          确定
        </el-button>
        <el-button slot="reference" type="primary"
                   style="float: right;margin-bottom: 20px"
                   @click="$router.go(-1)">返回
        </el-button>
      </div>

    </div>
    <el-table
        :data="stuList"
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        border
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="account"
          label="学号"
          width="150">
      </el-table-column>
      <el-table-column
          prop="userName"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          label="性别"
          width="60">
        <template slot-scope="scope">
          {{ scope.row.userSex == 0 ? '男' : '女' }}
        </template>
      </el-table-column>
      <el-table-column
          label="身份证"
          width="200">
        <template slot-scope="scope">
          {{ scope.row.identifyCard }}
        </template>
      </el-table-column>
      <el-table-column
          label="生日"
          width="120">
        <template slot-scope="scope">
          {{ dateFormat(scope.row.userBir) }}
        </template>
      </el-table-column>
      <el-table-column
          label="政治面貌"
          width="120">
        <template slot-scope="scope">
          {{ getPolitical(scope.row) }}
        </template>
      </el-table-column>
      <el-table-column
          label="个人描述">
        <template slot-scope="scope">
          <el-tooltip :content="scope.row.personDesc.substring(0,20)">
            <div class="cell">{{ scope.row.personDesc }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              class="detailBtn"
              type="success"
              @click="detail(scope.row)">查看详情描述
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination style="margin-top: 20px;float: right"
                   background
                   layout="prev, pager, next"
                   :page-size="findForm.size"
                   :total="total"
                   @current-change="page">
    </el-pagination>
    <!-- 详情弹框 -->
    <el-dialog :title="detailTitle" :visible="detailDialogVisible" @close="detailDialogVisible = false">
      <div>{{ detailContent }}</div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "StuListSelect",
  data() {
    return {
      //查询表单
      findForm: {
        page: 1,
        role: 2,
        size: 6,
        userName: ""
      },
      //新增表单
      addForm: {
        classIdid: this.$route.query.classIdid,
        //选中学生ids
        stuIds: []
      },
      total: null,
      //学生列表
      stuList: [],
      //搜索内容
      searchInput: '',
      //详情弹框标志
      detailDialogVisible: false,
      //详情弹框标题
      detailTitle: '',
      //详情弹框内容
      detailContent: ''
    }
  },
  methods: {
    //初始化数据，获取第一个分页的学生列表
    init() {
      const _this = this;
      _this.findForm.page = 1
      axios.post("http://localhost:8080/userinfo/findAllUserByRole", _this.findForm).then(function (res) {
        _this.stuList = res.data.data.content
        _this.total = res.data.data.total
        _this.findForm.size = res.data.data.size
        console.log("_this.stuList")
        console.log(_this.stuList)
      })
    },
    //搜索
    search() {
      const _this = this;
      _this.findForm.page = 1
      _this.findForm.userName = _this.searchInput
      axios.post("http://localhost:8080/userinfo/findAllUserByRole", _this.findForm).then(function (res) {
        _this.stuList = res.data.data.content
        _this.total = res.data.data.total
        _this.findForm.size = res.data.data.size
        console.log("_this.stuList")
        console.log(_this.stuList)
      })
    },
    //转换日期格式
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day;
    },
    //政治面貌转换
    getPolitical(row) {
      // 0中共党员1中共预备党员2共青团员3民主党派人士4无党派人士
      switch (row.politicalStatus) {
        case 0:
          return '中共党员';
        case 1:
          return '中共预备党员';
        case 2:
          return '共青团员';
        case 3:
          return '民主党派人士';
        case 4:
          return '无党派人士';
        default:
          return '无党派人士';
      }
    },
    //分页事件
    page(currentPage) {
      const _this = this;
      _this.findForm.page = currentPage
      axios.post("http://localhost:8080/userinfo/findAllUserByRole", _this.findForm).then(function (res) {
        _this.stuList = res.data.data.content
        _this.total = res.data.data.total
        _this.findForm.size = res.data.data.size
        console.log("_this.stuList")
        console.log(_this.stuList)
      })
    },
    //选中行数改变监听
    handleSelectionChange(val) {
      var resourceIds = val.map((item, index) => {
        return item.userId;
      })
      this.addForm.stuIds = resourceIds;
      console.log("this.addForm")
      console.log(this.addForm)
    },
    //提交选中
    submmit() {
      const _this = this;
      if (_this.addForm.stuIds.length == 0) {
        this.$notify({
          title: '警告',
          message: '请选择至少一名学生',
          type: 'warning'
        });
        return;
      }
      axios.post("http://localhost:8080/classStuDetail/addOldStus", _this.addForm).then((res) => {
        if (res.data.code == -1) {
          _this.$alert('资源添加失败', '错误', {
            confirmButtonText: '确定'
          });
        }
        if (res.data.code == 0) {
          this.$confirm('添加成功, 是否继续添加学生?', '提示', {
            confirmButtonText: '继续',
            cancelButtonText: '返回上一页',
            type: 'warning'
          }).then(() => {
            location.reload();
          }).catch(() => {
            _this.$router.go(-1)
          });
        }
      })
    },
    //查看详情细节
    detail(row) {
      this.detailDialogVisible = true
      this.detailTitle = row.userName
      this.detailContent = row.personDesc
    }
  },
  created() {
    console.log("初始化开始")
    this.init();
    console.log("初始化结束")

  }

}
</script>

<style scoped>
.container {
  width: 85%;
  margin: 10px auto;
  padding: 40px;
  padding-top: 20px;
  padding-bottom: 60px;

  color: black;
  box-shadow: 0px 0px 15px 0px rgb(0, 0, 0);
}

.border_head {
  display: flex;
  justify-content: space-between;
}

.searchbtn, .submmitbtn {
  margin: 0px;
  margin-left: 5px;
  height: 40px;
}

.search_input {
  display: flex;
  justify-content: right;
  margin: 10px;
}

.submmit_selects {
  margin: 10px;
}

.detailBtn {
  width: 100%;
}
</style>
